<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调大模型驾驶舱 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
        }
        .nav-item:hover {
            background-color: rgba(59, 130, 246, 0.2);
        }
        .active-nav {
            color: #60a5fa;
            border-bottom: 2px solid #60a5fa;
        }
        .dashboard-card {
            background-color: #1e293b;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .chart-container {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="bg-slate-800 shadow-lg sticky top-0 z-50">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center h-16">
                    <!-- 左侧logo -->
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/40x40?text=消防" alt="Logo" class="h-10 w-10">
                        <span class="ml-2 text-xl font-bold text-blue-400">火灾调查知识库平台</span>
                    </div>
                    
                    <!-- 中间导航菜单 -->
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item px-3 py-4 text-slate-300 font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-4 text-slate-300 font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-4 text-slate-300 font-medium">
                            <i class="fas fa-brain mr-1"></i> AI检索功能
                        </a>
                        <a href="report-generator.html" class="nav-item px-3 py-4 text-slate-300 font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-dashboard.html" class="nav-item active-nav px-3 py-4 text-slate-300 font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                    </nav>
                    
                    <!-- 右侧用户信息 -->
                    <div class="flex items-center space-x-4">
                        <a href="personal-center.html" class="text-slate-300 hover:text-blue-400">
                            <i class="fas fa-user-circle"></i> 个人中心
                        </a>
                        <a href="login.html" class="text-slate-300 hover:text-blue-400">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                        <a href="register.html" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主体内容区 -->
        <main class="container mx-auto px-4 py-6">
            <!-- 顶部标题和筛选 -->
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                <div>
                    <h1 class="text-2xl font-bold text-white mb-2">火调大模型驾驶舱</h1>
                    <p class="text-slate-400">实时监控、预测分析和可视化展示</p>
                </div>
                
                <div class="flex space-x-2 mt-4 md:mt-0">
                    <select class="bg-slate-700 text-slate-300 px-3 py-2 rounded-md border border-slate-600">
                        <option>全国范围</option>
                        <option>华北地区</option>
                        <option>华东地区</option>
                        <option>华南地区</option>
                        <option>西南地区</option>
                        <option>西北地区</option>
                        <option>东北地区</option>
                    </select>
                    
                    <select class="bg-slate-700 text-slate-300 px-3 py-2 rounded-md border border-slate-600">
                        <option>近30天</option>
                        <option>近90天</option>
                        <option>近180天</option>
                        <option>近一年</option>
                        <option>全部时间</option>
                    </select>
                    
                    <button class="bg-blue-600 text-white px-3 py-2 rounded-md hover:bg-blue-700">
                        <i class="fas fa-sync-alt mr-1"></i> 刷新
                    </button>
                </div>
            </div>
            
            <!-- 核心指标卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                <div class="dashboard-card p-4">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">火灾发生频次</p>
                            <h3 class="text-3xl font-bold text-white my-2">1,254</h3>
                            <p class="text-sm"><span class="text-red-500"><i class="fas fa-arrow-up"></i> 8.2%</span> vs 上月</p>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center text-blue-500">
                            <i class="fas fa-fire text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-card p-4">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">平均响应时间</p>
                            <h3 class="text-3xl font-bold text-white my-2">7.3<span class="text-xl">分钟</span></h3>
                            <p class="text-sm"><span class="text-green-500"><i class="fas fa-arrow-down"></i> 5.1%</span> vs 上月</p>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center text-green-500">
                            <i class="fas fa-stopwatch text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-card p-4">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">报告生成时效</p>
                            <h3 class="text-3xl font-bold text-white my-2">2.7<span class="text-xl">天</span></h3>
                            <p class="text-sm"><span class="text-green-500"><i class="fas fa-arrow-down"></i> 12.3%</span> vs 上月</p>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center text-purple-500">
                            <i class="fas fa-file-alt text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-card p-4">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-slate-400 text-sm">风险预测准确率</p>
                            <h3 class="text-3xl font-bold text-white my-2">85.6<span class="text-xl">%</span></h3>
                            <p class="text-sm"><span class="text-green-500"><i class="fas fa-arrow-up"></i> 3.2%</span> vs 上月</p>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center text-yellow-500">
                            <i class="fas fa-chart-line text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 地图和图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 左侧地图 -->
                <div class="dashboard-card p-4 lg:col-span-2">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-medium text-slate-200">火灾地理分布热力图</h3>
                        <div class="flex space-x-2">
                            <button class="text-xs px-2 py-1 rounded bg-slate-700 text-slate-300">月度</button>
                            <button class="text-xs px-2 py-1 rounded bg-blue-600 text-white">季度</button>
                            <button class="text-xs px-2 py-1 rounded bg-slate-700 text-slate-300">年度</button>
                        </div>
                    </div>
                    <div id="mapChart" class="chart-container" style="height:400px"></div>
                </div>
                
                <!-- 右侧火灾原因 -->
                <div class="dashboard-card p-4">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-medium text-slate-200">火灾原因分析</h3>
                        <button class="text-slate-400 hover:text-white">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div id="causeChart" class="chart-container"></div>
                </div>
            </div>
            
            <!-- 统计图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 响应时间和救援效率 -->
                <div class="dashboard-card p-4">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-medium text-slate-200">响应时间与伤亡率关系</h3>
                        <button class="text-slate-400 hover:text-white">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div id="responseChart" class="chart-container"></div>
                </div>
                
                <!-- 火灾趋势分析 -->
                <div class="dashboard-card p-4">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-medium text-slate-200">火灾发生趋势</h3>
                        <div class="flex space-x-2">
                            <button class="text-xs px-2 py-1 rounded bg-slate-700 text-slate-300">周</button>
                            <button class="text-xs px-2 py-1 rounded bg-blue-600 text-white">月</button>
                            <button class="text-xs px-2 py-1 rounded bg-slate-700 text-slate-300">年</button>
                        </div>
                    </div>
                    <div id="trendChart" class="chart-container"></div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Vue应用
        const app = Vue.createApp({
            data() {
                return {
                    // 数据可以在这里定义
                }
            },
            mounted() {
                this.initCharts();
            },
            methods: {
                initCharts() {
                    // 初始化火灾地理分布热力图
                    const mapChart = echarts.init(document.getElementById('mapChart'));
                    const mapOption = {
                        visualMap: {
                            min: 0,
                            max: 200,
                            calculable: true,
                            inRange: {
                                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                            },
                            textStyle: {
                                color: '#ddd'
                            }
                        },
                        series: [{
                            name: '火灾分布',
                            type: 'map',
                            map: 'china',
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            data: [
                                {name: '北京', value: 189},
                                {name: '天津', value: 128},
                                {name: '上海', value: 146},
                                {name: '重庆', value: 92},
                                {name: '河北', value: 108},
                                {name: '河南', value: 115},
                                {name: '云南', value: 86},
                                {name: '辽宁', value: 95},
                                {name: '黑龙江', value: 74},
                                {name: '湖南', value: 112},
                                {name: '安徽', value: 96},
                                {name: '山东', value: 119},
                                {name: '江苏', value: 142},
                                {name: '浙江', value: 133},
                                {name: '江西', value: 89},
                                {name: '湖北', value: 116},
                                {name: '广西', value: 103},
                                {name: '甘肃', value: 67},
                                {name: '山西', value: 72},
                                {name: '陕西', value: 81},
                                {name: '吉林', value: 63},
                                {name: '福建', value: 94},
                                {name: '贵州', value: 71},
                                {name: '广东', value: 162},
                                {name: '青海', value: 34},
                                {name: '西藏', value: 29},
                                {name: '四川', value: 108},
                                {name: '宁夏', value: 45},
                                {name: '海南', value: 59},
                                {name: '台湾', value: 78},
                                {name: '香港', value: 32},
                                {name: '澳门', value: 18}
                            ]
                        }]
                    };
                    mapChart.setOption(mapOption);
                    
                    // 火灾原因分析饼图
                    const causeChart = echarts.init(document.getElementById('causeChart'));
                    const causeOption = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 10,
                            textStyle: {
                                color: '#ddd'
                            },
                            data: ['电气故障', '易燃物不当存放', '人为纵火', '吸烟引起', '燃气泄漏', '其他原因']
                        },
                        series: [
                            {
                                name: '火灾原因',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#1e293b',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '14',
                                        fontWeight: 'bold',
                                        color: '#fff'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    {value: 428, name: '电气故障'},
                                    {value: 235, name: '易燃物不当存放'},
                                    {value: 124, name: '人为纵火'},
                                    {value: 187, name: '吸烟引起'},
                                    {value: 156, name: '燃气泄漏'},
                                    {value: 124, name: '其他原因'}
                                ]
                            }
                        ]
                    };
                    causeChart.setOption(causeOption);
                    
                    // 响应时间与伤亡率关系散点图
                    const responseChart = echarts.init(document.getElementById('responseChart'));
                    const responseOption = {
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                return `响应时间: ${params.value[0]}分钟<br>伤亡率: ${params.value[1]}%<br>案例数: ${params.value[2]}`;
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: '响应时间（分钟）',
                            nameTextStyle: {
                                color: '#ddd'
                            },
                            axisLabel: {
                                color: '#ddd'
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.1)'
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '伤亡率（%）',
                            nameTextStyle: {
                                color: '#ddd'
                            },
                            axisLabel: {
                                color: '#ddd'
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.1)'
                                }
                            }
                        },
                        series: [
                            {
                                name: '响应时间与伤亡率',
                                type: 'scatter',
                                symbolSize: function (data) {
                                    return Math.sqrt(data[2]) * 3;
                                },
                                emphasis: {
                                    focus: 'series',
                                    label: {
                                        show: true,
                                        formatter: function (param) {
                                            return param.data[2] + '例';
                                        },
                                        position: 'top'
                                    }
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ])
                                },
                                data: [
                                    [3.2, 1.2, 45],
                                    [4.5, 1.8, 36],
                                    [5.3, 2.5, 52],
                                    [6.1, 3.2, 38],
                                    [7.4, 4.5, 25],
                                    [8.2, 5.8, 19],
                                    [9.5, 7.2, 14],
                                    [10.3, 8.7, 12],
                                    [11.5, 12.3, 8],
                                    [12.8, 15.2, 6],
                                    [15.4, 19.7, 3]
                                ]
                            }
                        ]
                    };
                    responseChart.setOption(responseOption);
                    
                    // 火灾发生趋势折线图
                    const trendChart = echarts.init(document.getElementById('trendChart'));
                    const trendOption = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['总火灾数', '电气火灾', '燃气火灾', '人为火灾'],
                            textStyle: {
                                color: '#ddd'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisLabel: {
                                color: '#ddd'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#ddd'
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.1)'
                                }
                            }
                        },
                        series: [
                            {
                                name: '总火灾数',
                                type: 'line',
                                stack: '总量',
                                data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
                                lineStyle: {
                                    width: 3,
                                    color: '#60a5fa'
                                },
                                symbol: 'circle',
                                symbolSize: 8
                            },
                            {
                                name: '电气火灾',
                                type: 'line',
                                stack: '分类',
                                data: [45, 52, 38, 54, 35, 85, 76, 62, 65, 81, 98, 112],
                                lineStyle: {
                                    width: 2,
                                    color: '#f87171'
                                }
                            },
                            {
                                name: '燃气火灾',
                                type: 'line',
                                stack: '分类',
                                data: [32, 35, 30, 38, 25, 65, 55, 50, 48, 62, 75, 82],
                                lineStyle: {
                                    width: 2,
                                    color: '#fbbf24'
                                }
                            },
                            {
                                name: '人为火灾',
                                type: 'line',
                                stack: '分类',
                                data: [25, 28, 20, 25, 18, 45, 42, 38, 40, 52, 65, 78],
                                lineStyle: {
                                    width: 2,
                                    color: '#a3e635'
                                }
                            }
                        ]
                    };
                    trendChart.setOption(trendOption);
                    
                    // 响应窗口大小变化
                    window.addEventListener('resize', function() {
                        mapChart.resize();
                        causeChart.resize();
                        responseChart.resize();
                        trendChart.resize();
                    });
                }
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 